<template>
  <div class="message-settings p-6">
    <div class="max-w-2xl mx-auto">
      <!-- 标题 -->
      <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary mb-2">消息设置</h1>
        <p class="text-text-secondary">管理你接收的消息通知类型</p>
      </div>

      <!-- 设置表单 -->
      <div class="space-y-6">
        <!-- 评论回复通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">评论回复</h3>
              <p class="text-sm text-text-secondary">当有人回复你的评论时通知你</p>
            </div>
            <UiSwitch
              :model-value="settings.comment_replies ?? false"
              @update:model-value="settings.comment_replies = $event"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- 电影上传通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">电影上传</h3>
              <p class="text-sm text-text-secondary">当你的电影上传完成时通知你</p>
            </div>
            <UiSwitch
              :model-value="settings.movie_uploads ?? false"
              @update:model-value="settings.movie_uploads = $event"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- 系统通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">系统通知</h3>
              <p class="text-sm text-text-secondary">接收重要的系统更新和维护通知</p>
            </div>
            <UiSwitch
              :model-value="settings.system_notifications ?? false"
              @update:model-value="settings.system_notifications = $event"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- 点赞通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">点赞通知</h3>
              <p class="text-sm text-text-secondary">当有人点赞你的评论或电影时通知你</p>
            </div>
            <UiSwitch
              :model-value="settings.likes ?? false"
              @update:model-value="settings.likes = $event"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- 关注通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">关注通知</h3>
              <p class="text-sm text-text-secondary">当有人关注你时通知你</p>
            </div>
            <UiSwitch
              :model-value="settings.follows ?? false"
              @update:model-value="settings.follows = $event"
              :disabled="saving"
            />
          </div>
        </div>

        <!-- 邮件通知 -->
        <div class="setting-group">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium text-text-primary mb-1">邮件通知</h3>
              <p class="text-sm text-text-secondary">通过邮件接收重要通知</p>
            </div>
            <UiSwitch
              :model-value="settings.email_notifications ?? false"
              @update:model-value="settings.email_notifications = $event"
              :disabled="saving"
            />
          </div>
        </div>
      </div>

      <!-- 保存按钮 -->
              <div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-700">
        <div class="text-sm text-text-muted">
          设置会自动保存
        </div>
        
        <div class="flex items-center gap-3">
          <UiButton
            variant="ghost"
            size="md"
            @click="resetSettings"
            :disabled="saving"
          >
            重置
          </UiButton>
          <UiButton
            variant="primary"
            size="md"
            @click="saveSettings"
            :loading="saving"
            :disabled="!hasChanges"
          >
            保存设置
          </UiButton>
        </div>
      </div>

      <!-- 成功提示 -->
      <UiStatusMessage v-if="showSuccess" type="success" class="mt-4">
        设置已保存
      </UiStatusMessage>

      <!-- 错误提示 -->
      <UiStatusMessage v-if="error" type="error" class="mt-4">
        {{ error }}
      </UiStatusMessage>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useMessages } from '../../composables/useMessages'
import type { UpdateMessageSettingsParams } from '../../types/messages'
import { UiButton, UiSwitch, UiStatusMessage } from '../ui'

// 状态
const saving = ref(false)
const showSuccess = ref(false)
const error = ref<string | null>(null)
const originalSettings = ref<UpdateMessageSettingsParams>({})

// 使用消息composable
const {
  messageSettings,
  loadMessageSettings,
  updateMessageSettings
} = useMessages()

// 本地设置状态
const settings = ref<UpdateMessageSettingsParams>({
  comment_replies: true,
  movie_uploads: true,
  system_notifications: true,
  likes: true,
  follows: true,
  email_notifications: true
})

// 检查是否有更改
const hasChanges = computed(() => {
  if (!messageSettings.value) return false
  
  return (
    settings.value.comment_replies !== messageSettings.value.comment_replies ||
    settings.value.movie_uploads !== messageSettings.value.movie_uploads ||
    settings.value.system_notifications !== messageSettings.value.system_notifications ||
    settings.value.likes !== messageSettings.value.likes ||
    settings.value.follows !== messageSettings.value.follows ||
    settings.value.email_notifications !== messageSettings.value.email_notifications
  )
})

// 监听设置变化，自动保存
watch(settings, async (newSettings) => {
  if (hasChanges.value && messageSettings.value) {
    await saveSettings()
  }
}, { deep: true })

// 保存设置
const saveSettings = async () => {
  if (!hasChanges.value) return

  saving.value = true
  error.value = null

  try {
    const result = await updateMessageSettings(settings.value)
    
    if (result.success) {
      showSuccess.value = true
      setTimeout(() => {
        showSuccess.value = false
      }, 3000)
    } else {
      error.value = result.error || '保存失败'
    }
  } catch (err) {
    console.error('Error saving settings:', err)
    error.value = err instanceof Error ? err.message : '保存失败'
  } finally {
    saving.value = false
  }
}

// 重置设置
const resetSettings = () => {
  if (messageSettings.value) {
    settings.value = {
      comment_replies: messageSettings.value.comment_replies,
      movie_uploads: messageSettings.value.movie_uploads,
      system_notifications: messageSettings.value.system_notifications,
      likes: messageSettings.value.likes,
      follows: messageSettings.value.follows,
      email_notifications: messageSettings.value.email_notifications
    }
  }
}

// 初始化
onMounted(async () => {
  await loadMessageSettings()
  
  if (messageSettings.value) {
    settings.value = {
      comment_replies: messageSettings.value.comment_replies,
      movie_uploads: messageSettings.value.movie_uploads,
      system_notifications: messageSettings.value.system_notifications,
      likes: messageSettings.value.likes,
      follows: messageSettings.value.follows,
      email_notifications: messageSettings.value.email_notifications
    }
  }
})
</script>

<style scoped>
.setting-group {
  @apply p-4 bg-background-800 rounded-lg border border-gray-700;
}
</style>
